<template>
	<div class="content-box">
		<div>
			<!-- 页面主内容 信息 -->
			<div class="m-30">
				<div class="bg-fff p-20 bor-r8 mt-20">
					<div class="flex align-center lh-60 pb-20  color-3 fontS28 bor-b">
						<div class="">订单编号</div>
						<div class="ml-auto">{{ orderDetail.orderNo }}
						</div>
					</div>
					<div class="flex align-center lh-60 mt-20 pb-20  color-3 fontS28 bor-b">
						<div class="">{{ orderDetail.serveName }}</div>
						<div class="ml-auto">{{ orderDetail.serveNum }}
						</div>
					</div>
					<div class="flex align-center lh-60 mt-20 color-3 fontS28">
						<div class="">订单时间</div>
						<div class="ml-auto">{{ orderDetail.createTime }}</div>
					</div>

				</div>
				<div class="bg-fff p-20 bor-r8 mt-20">
					<div class="flex align-center lh-60 pb-20  color-3 fontS28">
						<div class="">协议上传</div>
						<div class="ml-auto color-green" @click="downLoad">下载服务协议模板
						</div>
					</div>
					<div class="uploadBtn flex align-center justify-center" @click="uploadSent">
						<div v-if="param.contractUrl.length > 0">
							<div class="flex-center resumeItem mb-20">
								<image class="resumeIcon" v-if="param.fileExtension === 'docx'"
									src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/docx%402x.png"
									mode="asspectFill" />
								<image class="resumeIcon" v-if="param.fileExtension === 'doc'"
									src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/doc%402x.png"
									mode="asspectFill" />
								<image class="resumeIcon" v-if="param.fileExtension === 'pdf'"
									src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/Pdf%402x.png"
									mode="asspectFill" />
								<div class="ml-36" style="width: calc(100% - 150upx);">
									<div class="fontE1 color-3 fontS30 font-500">{{ param.fileName }}</div>
									<div class="flex-center lh-44 fontS24 color-6 mt-12">{{ param.fileSize }}
									</div>
								</div>
							</div>
						</div>
						<div class="iconfont icon-tianjia fontS40 color-green" v-else></div>
					</div>


				</div>
				<div class="bg-fff p-20 bor-r8 mt-20 color-3">
					<div class="fontS28 color-3 lh-60">
						线上签约流程
					</div>
					<div class="fontS24 color-3 lh-40">
						1、下载服务的协议模板
					</div>
					<div class="fontS24 color-3 lh-40">
						2、买方打印或者其他方式后进行签署和盖公章
					</div>
					<div class="fontS24 color-3 lh-40">
						2、扫描或其他方式进行签署后的协议上传(PDF格式)
					</div>




				</div>
			</div>
			<div class="bottom">
				<div class="ml-auto flex-center">

					<div class="bottomBtnConfirm ml-32" @click="submit">确认签约
					</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
import { appOrderDetail, orderSign, exportContract } from '@/api/order'
const ossUploadFile = require("@/utils/ossupload/upload").ossUploadFile;

export default {
	data() {
		return {
			baseUrl: getApp().globalData.baseUrl,
			custom: null,
			orderId: '',
			orderDetail: null,
			param: {
				contractUrl: null
			}
		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},

	async onLoad(opt) {
		this.custom = wx.getMenuButtonBoundingClientRect()
		if (opt.id) {
			this.orderId = opt.id
			await this.getDetail()
		}

	},


	methods: {
		async getDetail() {
			const { data } = await appOrderDetail(this.orderId)
			this.orderDetail = data
			this.param = data
		},
		async uploadSent() {
			let _this = this;
			uni.chooseMessageFile({
				count: 1, // 默认选择一个文件
				extension: ['doc', 'docx', 'pdf'], // 限制只能选择DOC文件
				type: 'file',
				success: (res) => {
					console.log(res)
					for (let i = 0; i < res.tempFiles.length; i++) {
						if (['doc', 'docx', 'pdf'].includes(res.tempFiles[i].name.split('.').pop())) {
							_this.upload(res.tempFiles[i])

						} else {
							uni.showToast({ title: '仅支持doc,docx,pdf格式的文件', icon: 'none' });
						}
					}

				},
				fail: (err) => {
					console.error('选择文件失败', err);
				}
			});
		},
		async upload(path) {
			let data = { type: 3 };
			data.filePath = path.path;
			ossUploadFile.ossUploadFile(data, async (res) => {
				this.param.contractUrl = res.fileName
				this.param.fileSize = Math.ceil(path.size / 1024)
				this.param.fileName = path.name
				this.param.fileExtension = res.fileName.split('.')[res.fileName.split('.').length - 1]
			}, async (error) => {
				console.log(error)

			})
		},
		async downLoad() {
			const { data } = await exportContract({ id: this.orderId })
			uni.downloadFile({
				url: this.baseUrl + data.url,
				success: (res) => {
					console.log(res)
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							fileType: data.url.split('.')[data.url.split('.').length - 1], // 可以是doc, docx, xls, xlsx, ppt, pptx, pdf
							success: function (res) {

								uni.setClipboardData({
									data: this.baseUrl + data.url,
									success: () => {
										uni.showToast({
											title: '复制成功，请在浏览器打开保存',
											icon: 'none'
										});
									},
									fail: (err) => {
										console.error('复制失败:', err);
										uni.showToast({
											title: '复制失败',
											icon: 'none'
										});
									}
								});
								// 用户可以从预览界面选择"保存到手机"
							},
							fail: function (err) {
								console.error('打开失败', err);
								uni.showToast({ title: '打开文件失败', icon: 'none' });
							}
						});
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('下载失败', err);
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			});
		},
		// saveFile(tempFilePath) {
		// 	uni.saveFile({
		// 		tempFilePath: tempFilePath,
		// 		success: (res) => {
		// 			console.log(res)
		// 			uni.showToast({
		// 				title: '保存成功',
		// 				icon: 'success'
		// 			});
		// 			console.log('文件保存路径:', res.savedFilePath);
		// 		},
		// 		fail: (err) => {
		// 			console.error('保存失败', err);
		// 			uni.showToast({
		// 				title: '保存失败',
		// 				icon: 'none'
		// 			});
		// 		}
		// 	});
		// },
		// 确认签约
		async submit() {
			this.param.contract = 1
			if (!this.param.contractUrl) {
				uni.showToast({ title: '请先上传签署的协议文件' })
				return false;
			}
			const { code } = await orderSign(this.param)
			uni.showToast({ title: '提交成功', icon: 'none' })
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 400);

		},

	}
};
</script>
<style lang="less" scoped>
@import url(order.less);

.content-box {
	height: 100vh;
	overflow: hidden;

}

.resumeIcon {
	width: 85upx;
	height: 100upx;
}
</style>
